<template>
    <div class="flex-wrapper" style="color:#fff;">   
        <div class="flex-item">
            <img class="flex-icon" style="width:3vw;" :src="data.icon" />
            <div class="flex-content">
                <div>{{ data.text + '巡检数' }}</div>
                <div class="value">{{ data.sum }}</div>
            </div>
        </div>
        <div class="flex-item">
            <img class="flex-icon" :src="finishedIcon" />
            <div class="flex-content">
                <div>已完成</div>
                <div>
                    <span  style="font-size:var(--18FontSize); line-height:var(--24FontSize); margin-right:var(--xsPadding); color:#2FF186; ">{{ data.finished }}</span>
                    <span>件</span>
                </div>
            </div>
        </div>
        <div class="flex-item">
            <img class="flex-icon" :src="unfinishedIcon" />
            <div class="flex-content">
                <div>待完成</div>
                <div>
                    <span  style="font-size:var(--18FontSize); line-height:var(--24FontSize); margin-right:var(--xsPadding); color:#1AE4FF;">{{ data.unfinished }}</span>
                    <span>件</span>
                </div>
            </div>
        </div>
        <div class="flex-item">
            <img class="flex-icon" :src="fixIcon" />
            <div class="flex-content">
                <div>需整改</div>
                <div>
                    <span  style="font-size:var(--18FontSize); line-height:var(--24FontSize); margin-right:var(--xsPadding); color:#FFB749;">{{ data.fix }}</span>
                    <span>件</span>
                </div>
            </div>
        </div>
    </div> 
</template>
<script setup>
    import finishedIcon from '@/assets/monitor/finished.png'
    import unfinishedIcon from '@/assets/monitor/unfinished.png'
    import fixIcon from '@/assets/monitor/fix.png'
    const props = defineProps({
        data:{ type:Object }
    })
</script>
<style lang="scss" scoped>
    .screen-wrapper {
        height:100%;
        background:#000;
        background-size:100% 100%;
        background-image:url(@/assets/monitor/bg.png);
        font-size:var(--baseFontSize);
        position:relative;
        .title {
            height:10%;
            display:flex;
            justify-content: center;
            align-items: center;
            font-size:var(--36FontSize);
            font-weight:bold;
            letter-spacing: 0.4vw;
            font-style:italic;
            color:#fff;
            .shadow {
                text-shadow: 0px 0px 12px #3ae8ff;
            }
        }
        .content {
            height:82%;
            width:95%;
            margin:0 auto;
            padding-top:var(--mPadding);
            display:flex;
            flex-wrap:wrap;
            align-items:flex-start;
            gap:var(--mPadding);
            .card, .flex-wrapper {
                width:calc( calc(100% - 2 * var(--mPadding)) / 3 );
            }
            .card {
                height:40%;
                .card-title {
                    height:12%;
                    text-align:center;
                    background:rgba(26, 227, 254, 0.2);
                    font-size:var(--18FontSize);
                    color:#fff;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    position:relative;
                    .shadow {
                        text-shadow: 0px 0px 12px #3ae8ff;
                    }
                   
                }
                .card-title::after {
                    content:'';
                    position:absolute;
                    width:100%;
                    height:1px;
                    bottom:0;
                    left:0;
                    background-image:linear-gradient(to Right, rgba(34, 221, 246, 0.05) 0% , rgba(34, 221, 246, 0.65) 50%, rgba(34, 221, 246, 0.05) 100% );
                }
                .card-content {
                    height:88%;
                    background-image:linear-gradient(to bottom, rgba(26, 227, 254, 0.05), rgba(26, 227, 254, 0.15))
                }
            }
            .flex-wrapper {
                display:flex;
                height:20%;
                padding:0 var(--mPadding);
                align-items: center;
                justify-content: space-around;
                background-image:linear-gradient(to bottom, rgba(26, 227, 254, 0.05), rgba(26, 227, 254, 0.15));
                position:relative;
                font-size:var(--baseFontSize);
                .flex-item {
                    display:flex;
                    align-items: center;
                    color:#fff;
                    position:relative;
                    .flex-icon {
                        width:1.8vw;
                        margin-right:var(--sPadding);
                    }
                    .flex-content {
                       
                    }
                    .value {
                        font-size:var(--24FontSize);
                        font-weight:bold;
                        line-height:var(--32FontSize);
                    }
                }
                
            }
            .flex-wrapper::before {
                content:'';
                position:absolute;
                width:100%;
                height:2px;
                top:0;
                left:0;
                background-image:linear-gradient(to Right, rgba(34, 221, 246, 0.05) 0% , rgba(34, 221, 246, 0.65) 50%, rgba(34, 221, 246, 0.05) 100% );
            }
            .flex-wrapper::after {
                content:'';
                position:absolute;
                width:100%;
                height:2px;
                bottom:0;
                left:0;
                background-image:linear-gradient(to Right, rgba(34, 221, 246, 0.05) 0% , rgba(34, 221, 246, 0.65) 50%, rgba(34, 221, 246, 0.05) 100% );
            }
        }
    }
</style>